<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/assets/js/jquery.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
        var seat_num ;
        var total_bill  = 0 ;
        var pricePerTicked  = [[${film.getPrice()}]];//单价
        var maximumSeats  =  348;//预定座位数目的最大限制

        $(document).ready(function(){
            var s = [[${seatState}]]
            $('#bookNowButton').hide(); // 隐藏预定按钮

            $('.seat').each(function(i) {
                var column_num = parseInt( $(this).index() ) + 1;
                var row_num = parseInt( $(this).parent().index() )+1;
                seat_num = row_num+"-"+column_num ;
                $(this).text(seat_num); // 座位号
                $(this).addClass("seat"+seat_num);  // 给座位加css
                var dd = s[i];
                //添加记录状态的span
                $(this).append("<span class='test' hidden></span>");
                //添加span的页面信息
                $(this).children().html(dd)

                if($(this).hasClass('select')){ // 检查是否被选中
                    $(this).removeClass('select'); //如果选中了，移除选中的css
                    $(this).css('background-color','#D8D8D8'); // 重新加个背景
                    var currentSeatClass = $(this).attr('class').split(' ')[1];
                    console.log(currentSeatClass);
                    $( "#selected_seat ."+currentSeatClass ).remove();
                }

            });

        });

            var ss = $("#seats .seat");
            alert(ss.length);
            $(ss).each(function (i) {
                // alert("in");
                var pp = $(".test");
                var aa = pp[i].innerHTML+"";
                // alert(aa);
                if(aa=="1"){
                     // alert("in");
                    // var ss1 = $("#seats .seat .select");
                    $(ss[i]).css('background-color','#ff2832'); // 加背景颜色
                    //     // alert(aa);
                    ss[i].onclick=null;
                }else {
                    $(ss[i]).click(function () {
                        // $(this).css('background-color','#71DCAA'); // 加背景颜色
                        // $(this).addClass("select"); // 添加选中css


                        // $('#errMsg').html('');
                            if($(this).hasClass('select')){ // 检查是否被选中
                                $(this).removeClass('select'); //如果选中了，移除选中的css
                                $(this).css('background-color','#D8D8D8'); // 重新加个背景

                                var currentSeatClass = $(this).attr('class').split(' ')[1];

                                console.log(currentSeatClass);
                                $( "#selected_seat ."+currentSeatClass ).remove();

                            }else if($(".your_selected_seat").length<maximumSeats && !$(this).hasClass('select')){ // 检查预定的座位数目是否超出限制
                                $(this).css('background-color','#71DCAA'); // 加背景颜色
                                $(this).addClass("select"); // 添加选中css
                                // $(this).click=null;
                                var column_num = parseInt( $(this).index() ) + 1;
                                var row_num = parseInt( $(this).parent().index() )+1;


                                $( "#selected_seat" ).append("<span class='your_selected_seat seat"+row_num+"-"+column_num+" '> 座位号: <b style='color:#EAABFF'>" + row_num+"-"+column_num +"</b> </br></span>");
                                $( "#buyTicket" ).append("<span class='your_selected_seat seat"+row_num+"-"+column_num+" '> 座位号: <b style='color:#EAABFF'>" + row_num+"-"+column_num +"</b> </br></span>");
                            }else {
                                $('#errMsg').html('您选中的座位已经超过限制.');
                            }

                            if($(".your_selected_seat").length){
                                $('#bookNowButton').fadeIn(1000);
                            }else {
                                $('#bookNowButton').fadeOut(1000);
                            }
                            //计算总价
                            total_bill = $(".your_selected_seat").length * pricePerTicked;
                            $('#total > span').html(total_bill);

                    })
                }

            })

    </script>
</head>
<body>
<div style="width:1300px;margin: 0 auto;">
            <span id='screen'>
             <p>
                座位预定
            </p>
            </span>
    <div id="seats">
        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>

        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
        <div class="seatsRaw">
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
            <div class="seat"></div>
        </div>
    </div>

    <div id="booking_desc">
        <div class="booking_left">
            <p style="color: #FBBC53;font-weight: bold; font-size: larger;">您选中的座位 </p>
            <div id="selected_seat"></div>

                <button id="bookNowButton" type="button" class="buyTicket">现在预定</button>

            <div id="errMsg"></div>
        </div>

        <div class="booking_right">每个座位的单价: <span th:text="${film.getPrice()}"></span>元
            <br><br>
            <div id="total">总价：<span> 0 </span></div>
        </div>
    </div>

</div>

</body>

<script type="text/javascript" th:inline="javascript">

    $(".seat").bind("click",function () {
        $(this)

    })
    // 选购
    $(".buyTicket").bind("click",function () {
       var s  = $(".your_selected_seat");
       var myseat = [];
       alert(s[0].innerHTML);
       for (var i = 0; i < s.length; i++){
           var sea = s[i].innerHTML.substring(s[i].innerHTML.indexOf(">")+1)
           var seatNum = sea.substring(0,sea.indexOf("<"))
           myseat.push(seatNum);
       }
       var length = s.length;
       alert(length);
        alert(myseat);
        var subtotal = $('#total > span').text();
        window.open("http://127.0.0.1:8080/alipayTicket?"+"&subtotal="+subtotal+"&length="+length+"&myseat="+myseat+"&hall="+[[${film.getCinemaId()}]]+
            "&id="+[[${film.getId()}]]+"&MovieId="+[[${film.getMovieId()}]]);
        // toJump("/buy/buyTicketFinal?"+"&length="+length+"&myseat="+myseat+"&hall="+[[${film.getCinemaId()}]]+
        //     "&id="+[[${film.getId()}]]+"&MovieId="+[[${film.getMovieId()}]])
    })

</script>

</html>